<!DOCTYPE html>
<!--suppress HtmlUnknownAttribute -->
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header"/>
  <link rel="stylesheet" th:href="@{/admin/css/other/login.css}"/>
  <title>登录</title>
</head>
<!-- 代 码 结 构 -->
<body background="/admin/images/login.svg">
<form action="javascript:void(0);" class="layui-form">
  <div class="layui-form-item">
    <img class="logo" src="/admin/images/logo.png" alt="logo"/>
    <div class="title">废弃井库系统</div>
    <div class="desc">
      废 弃 井 名 录 库 上 报 管 理 系 统
    </div>
  </div>
  <div class="layui-form-item">
    <!--suppress HtmlFormInputWithoutLabel -->
    <input class="layui-input" hover name="username" placeholder="账 户 : admin " type="text" value="admin"/>
  </div>
  <div class="layui-form-item">
    <!--suppress HtmlFormInputWithoutLabel -->
    <input class="layui-input" hover name="password" placeholder="密 码 : admin " type="password" value="admin"/>
  </div>
  <div class="layui-form-item">
    <!--suppress HtmlFormInputWithoutLabel -->
    <input class="code layui-input layui-input-inline" hover name="captcha" placeholder="验证码 : "/>
    <!--suppress HtmlUnknownTarget -->
    <img class="codeImage" id="captchaImage" src="/system/captcha/generate" alt="captcha image"/>
  </div>
  <div class="layui-form-item">
    <input lay-skin="primary" name="remember-me" title="记住密码" type="checkbox">
  </div>
  <div class="layui-form-item">
    <button class="pear-btn pear-btn-success login" lay-filter="login" lay-submit>
      登 入
    </button>
  </div>
</form>
<th:block th:include="include :: footer"/>
<script>
  layui.use(['form', 'jquery', 'layer', 'button', 'popup'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    let layer = layui.layer;
    let button = layui.button;
    let popup = layui.popup;
    let captchaPath = "/system/captcha/generate";

    form.on('submit(login)', function (data) {
      let loader = layer.load();
      let btn = button.load({elem: '.login'});
      $.ajax({
        url: '/login',
        data: data.field,
        type: "post",
        dataType: 'json',
        success: function (result) {
          layer.close(loader);
          btn.stop(function () {
            if (result.success) {
              popup.success(result.msg, function () {
                location.href = "/index";
              })
            } else {
              popup.failure(result.msg, function () {
                document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
              });
            }
          })
        }
      });
      return false;
    });

    $("#captchaImage").click(function () {
      document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
    })
    setInterval(function () {
      document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
    }, 30 * 1000);
    validateInvalid();
  })
</script>
<script>
  if (window !== top) {
    top.location.href = location.href;
  }

  function validateInvalid() {
    if (getFail() === "invalid") {
      layer.alert("<span style='color: red'>登录已失效，请重新登录</span>", {
          icon: 0,
          title: "系统提示"
        },
        function (index) {
          layer.close(index);
        });
    }
  }

  function getFail() {
    let reg = new RegExp("(^|&)fail=([^&]*)(&|$)");
    let r = window.location.search.substring(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
  }
</script>
</body>
</html>
